<script setup>
import { GetListAPI } from "@/api/device/equipment";

// vue3方法实例
const { proxy } = getCurrentInstance();
const { equipment_of_urgency, equipment_failure_type } = proxy.useDict(
  "equipment_of_urgency",
  "equipment_failure_type"
);

// 子传父
const emit = defineEmits();

// 父传子
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  // 传入数据 用于回显
  data: {
    type: Object,
    default: () => {},
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 传入数据 弹窗标题
  title: {
    type: String,
    default: "",
  },
});

const ruleFormRef = ref(null);

// 表单字段
const ruleForm = reactive({
  repairCode: "",
  repairUrgent: "",
  deviceId: "",
  repairFailureType: "",
  repairFailureDescription: "",
  repairFailurePicture: "",
});

const tabs = ref("维修信息");

// 表单校验
const rules = reactive({
  repairUrgent: [
    { required: true, message: "请选择紧急程度", trigger: "change" },
  ],
  repairFailureType: [
    { required: true, message: "请选择故障类型", trigger: "change" },
  ],
  repairFailureDescription: [
    { required: true, message: "请输入故障描述", trigger: "blur" },
  ],
  repairOpinion: [
    { required: true, message: "请输入审核意见", trigger: "blur" },
  ],
  knowledgeFailureContent: [
    { required: true, message: "请输入故障内容", trigger: "blur" },
  ],
});

// 提交方法
const submit = async () => {
  const valid = await ruleFormRef.value.validate();
  if (!valid) return false;
  return ruleForm;
};

// 监听回显
const initData = () => {
  if (props.data?.repairId) {
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    );
    ruleForm.repairFailurePicture = ruleForm.repairFailurePicture
      ? JSON.parse(ruleForm.repairFailurePicture)
          .map((t) => t.url)
          .join(",")
      : "";
    ruleForm.repairUrgent = String(props.data.repairUrgent);
    ruleForm.repairFailureType = String(props.data.repairFailureType);
  }
};

initData();
// 导出方法
defineExpose({ submit });
</script>
<template>
  <el-form
    inline
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    status-icon
  >
    <el-form-item label="紧急程度" prop="repairUrgent">
      <el-select
        :disabled="props.title != '修改' && props.title != '新增'"
        v-model="ruleForm.repairUrgent"
        filterable
        placeholder="请选择紧急程度"
      >
        <el-option
          v-for="item in equipment_of_urgency"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="故障类型" prop="repairFailureType">
      <el-select
        :disabled="props.title != '修改' && props.title != '新增'"
        v-model="ruleForm.repairFailureType"
        placeholder="请选择故障类型"
      >
        <el-option
          v-for="item in equipment_failure_type"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="故障内容" prop="knowledgeFailureContent">
      <el-input
        :disabled="props.title != '修改' && props.title != '新增'"
        clearable
        v-model="ruleForm.knowledgeFailureContent"
        placeholder="请输入内容"
      />
    </el-form-item>
    <div class="rk">
      <el-form-item label="故障描述" prop="repairFailureDescription">
        <el-input
          :disabled="props.title != '修改' && props.title != '新增'"
          clearable
          v-model="ruleForm.repairFailureDescription"
          :rows="4"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
    </div>
    <div class="rk">
      <el-form-item label="故障图片">
        <p-imageUpload
          v-model="ruleForm.repairFailurePicture"
          v-if="!(props.title != '修改' && props.title != '新增')"
        />
        <p-imagePreview :src="ruleForm.repairFailurePicture" v-else />
      </el-form-item>
    </div>
    <div class="rk" v-if="props.title == '审核'">
      <el-form-item label="审核意见">
        <el-input
          :disabled="props.title == '修改'"
          clearable
          v-model="ruleForm.repairOpinion"
          :rows="4"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
